<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>父子组件的通讯-父传子</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <con :hobbys="hobbys" :message="message"></con>
    </div>
    <template id="con">
      <div>
        <ul>
          <li v-for="item in hobbys">{{item}}</li>
        </ul>
        <h1>{{message}}</h1>
      </div>
    </template>
    <script>
      //创建Vue实例,得到 ViewModel
      var app = new Vue({
        el: "#app",
        data: {
          hobbys: ["篮球", "羽毛球", "台球", "足球"],
          message: "aaaaa",
        },
        methods: {},
        components: {
          con: {
            template: "#con",
            // 在组件中，使用选项props来声明需要从父级接收到的数据。
            // props的值有两种方式：字符串数组、对象
            // 字符串数组
            // props: ["hobbys", "message"],
            // 对象
            props: {
              // 1. 类型限制
              // hobbys: Array,
              // message: String,

              // 多个可能的类型
              // propB: [String, Number],

              // 2. 提供一些默认值，以及必传值
              message: {
                type: String,
                default: "aaaaa", //默认值
                required: true, // 设置之后，这就是必填的字符串，不填就报错
              },
              hobbys: {
                type: Array,
                default() {
                  return {
                    message: "hello",
                  };
                },
              },
            },
          },
        },
      });
    </script>
  </body>
</html>
